import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Button, Spin, Form, Input, Table,  Modal, Select,message } from 'antd'
import Ueditor from '../../components/Ueditor.js'
/* 引用接口文档路径 */
import {
  masterReport,masterInfo,addMasterReport,deleteMasterReport,editMasterReport,adoptMasterReport,getsecondList
} from 'actions/materialManage'
import {getbasetypefetch} from 'actions/common'
import '../../style/userControl.less'
import ModalAddMasterReport from './addMasterReportModal.js';

const FormItem = Form.Item
@Form.create({})
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",//基础数据列表
      contentModal:false,//列表内容详情弹窗
      modalList:"",//列表内容详情
      addModalFlg:false,//新增报告弹窗
      addModalType:"",
      selectTypeList:[],
      buttongroup:[],
      refuseflag:false,
      shsblist:[],
      refuseReason:"",//审核拒绝原因
      secondTypeList:""//二级数据
    }
    this.keyword={"typeId":"","title":"","publisherName":"",};//搜索关键词
    this.currentNumber = 1;//当前页面
    this.pagesize = 10;//每页条数
    this.typeId = "";//报告类型
  }
  componentDidMount() {
    this.selectList();
    this.dataTypeList();
  }
  
  selectFn(){//点击搜索按钮
    this.keyword = {
      "typeId":this.props.form.getFieldValue('typeId'),
      "title":this.props.form.getFieldValue('title'),
      "publisherName":this.props.form.getFieldValue('publisherName'),
    };
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(masterReport(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
        })
    }))
  }
  
  changeSelect(value){//报告类型
    this.typeId = value;
  }

  dataTypeList(){
    this.props.dispatch(getbasetypefetch(
      {"type":5},
      (respose) => {
        this.setState({
          selectTypeList: respose.respData.resultData,
        })
    }))
    this.props.dispatch(getsecondList(
      {"type":5},
      (respose) => {
        this.setState({
          secondTypeList: respose.respData.resultData,
        })
    }))
    
  }

  addReport(type,id){//新增报告
    //编辑的情况  带数据去组件
    if(type == 2){
      this.props.dispatch(masterInfo({"id":id},
      (respose) => {
          this.setState({
          addModalFlg: true,
          modalList:respose,
          addModalType:type,
        })
      }))
    }else{//新增的情况
      this.setState({
        addModalFlg: true,
        modalList:{},
        addModalType:type,
      })
    }

  }

  addModalCancel(){//关闭新增报告弹窗
    this.setState({
      addModalFlg: false,
    })
  }

 

  contentModalCancel(){//关闭查看弹窗
    this.setState({
      contentModal: false,
    },()=>{
      this.setState({
        modalList: "",
      })
    })
  }

  showModal(id){//点击查看  大咖报告详情
    this.props.dispatch(masterInfo({"id":id},
      (respose) => {
        if(respose.respData.dataStatus==2){
          this.setState({
            buttongroup:[
              <Button key="ok" type="primary"  onClick={this.succuesFn.bind(this,respose.respData.id)}>通过</Button>,
              <Button key="cancel" type="primary"  onClick={this.refuseFN.bind(this,respose.respData.id)}>拒绝</Button>
            ]
          })
        }
        else if(respose.respData.dataStatus!=2){
          this.setState({
            buttongroup:[
              <Button key="del" type="primary"  onClick={this.deleteList.bind(this,respose.respData.id)}>删除</Button>
            ]
          })
        }
        this.setState({
          contentModal: true,
          modalList:respose,
        })

    }))
  }
  refuseFN(id){
    this.props.dispatch(getbasetypefetch(
      {"type":19},
      (respose) => {
        this.setState({
          shsblist: respose.respData.resultData,
          refuseflag:true,

        })
    }))
  }
  succuesFn(id){
    this.props.dispatch(adoptMasterReport(
      {"dataType":3,"contentId":id},
      (respose) => {
        message.success(respose.respMsg);
        this.selectList();
        this.setState({
          contentModal:false
        })
    }))
  }
  handleOk(){//拒绝
    if(this.state.refuseReason==""){
      message.success("请选择拒绝原因");
      return;
    }
    this.props.dispatch(adoptMasterReport(
      {"dataType":4,"contentId":this.state.modalList.respData.id,"refuseReason":this.state.refuseReason},
      (respose) => {
        message.success(respose.respMsg);
        this.selectList();
        this.setState({
          contentModal:false,
          refuseflag:false,
          refuseReason:""
        })
    }))
  }
  handleChange(value){//选择拒绝的原因
    this.setState({
      refuseReason:value
    })
  }
  handleCancel(){//取消拒绝
    this.setState({
      refuseflag:false,
      refuseReason:""
    })
  }
  deleteList(id){//查看弹窗里面的删除按钮
    Modal.confirm({
      content:"确定要删除该条信息么？",
      onOk:()=>{
        this.props.dispatch(deleteMasterReport(
          {"id":id},
          (respose) => {
            var length = this.state.list.respData.count ? this.state.list.respData.count : 0;
            if(Math.ceil(length/this.pagesize) == this.currentNumber && length%this.pagesize == 1 && this.currentNumber != 1){
              this.currentNumber = this.currentNumber - 1;
            }
            message.success(respose.respMsg);
            this.contentModalCancel();           
            this.selectList(this.currentNumber);
        }))
      },
      onCancel:()=>{
      }
    })
    
  }




  columns() {//表格标题
    return [
      {
        title: '报告编号',
        key: 'code',
        dataIndex: 'code',
        width: '10%',
      },
      {
        title: '报告类型',
        dataIndex: 'typeName',
        key: 'typeName',
        width: '10%',        
      },
      {
        title: '报告标题',
        dataIndex: 'title',
        key: 'title',
        width: '10%',
      },
      {
        title: '发布人',
        dataIndex: 'publisherName',
        key: 'publisherName',
        width: '10%',
      },
      {
        title: '发布时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: '10%',
      },
      {
        title: '阅读数',
        dataIndex: 'readTotal',
        key: 'readTotal',
        width: '10%',
      },
      {
        title: '评论数',
        dataIndex: 'commentTotal',
        key: 'commentTotal',
        width: '10%',
      },
      {
        title: '点赞数',
        dataIndex: 'fabulousTotal',
        key: 'fabulousTotal',
        width: '10%',
      },
      {
        title: '状态',
        width: '10%',
        render: (text, recordId, index) => 
        <div>
          {
            (()=>{
              switch(text.dataStatus){
                case 2 :
                return '待审核'
                case 3 :
                return '已发布'
                case 4 :
                return '审核失败'
                case 5 :
                return '已保存'
              }
            })()
          }
        </div>,
        
      },
      {
        title: '操作',
        width: '10%',
        render: (text, recordId, index) => 
        <div>
          <Button type="primary" size="small" onClick={this.showModal.bind(this,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>查看</Button>   
          {(text.isAdmin==1&&(text.dataStatus==3||text.dataStatus==5))?<Button type="primary" size="small" onClick={this.addReport.bind(this,2,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>编辑</Button>:''}
        </div>,
        
      },
    ]
  }
  


  render () {
    const {form } = this.props
    const { getFieldDecorator } = form    
    const respData = this.state.list.respData ? this.state.list.respData : [];//刷新页面调用接口数据赋值
    const modalList = this.state.modalList.respData ? this.state.modalList.respData :[];
    const dateFormat = 'YYYY/MM/DD';
    return (
      <div className="page">
        {/* 搜索条件筛选块 */}
        <div className="searcDiv">
          <Form onSubmit={this.selectFn.bind(this)} layout="inline">
            <FormItem label="报告类型">      
              {
                getFieldDecorator('typeId', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Select placeholder="请选择报告类型"    style={{ width: 150 }} >
                    <Select.Option value={''} key={999}>全部</Select.Option>
                    {
                      this.state.selectTypeList.map((item,i)=> {
                        return(
                          <Select.Option value={item.code} key={i}>{item.value}</Select.Option>
                        )
                      })
                    }
                  </Select> 
                )
              }                      
            </FormItem>
            <FormItem label="报告标题">
              {
                getFieldDecorator('title', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }  
            </FormItem>
            <FormItem label="发布人">
              {
                getFieldDecorator('publisherName', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }  
            </FormItem>
            <Button type="primary" onClick={this.selectFn.bind(this)}>搜索</Button>
            <Button type="primary" onClick={this.addReport.bind(this,1)}>新增</Button>
          </Form>
        </div>
        {/*数据渲染列表*/}
        <Spin spinning={false}>
          <Table
            rowKey="id" 
            columns={this.columns()}//表格标题列 
            dataSource={respData.resultData}
            pagination={{ total: respData.count, current:this.currentNumber,pageSize: this.pagesize, onChange: this.selectList.bind(this)}}
            scroll={{ y: true }}
            rowClassName={(record, index) => record.dataStatus == 2 ? 'tableRed' : ''} 
          />
        </Spin>
        {/* 新增报告弹窗 */}
        {
          this.state.addModalFlg ?
          <ModalAddMasterReport 
            type={this.state.addModalType}
            ModalFlg={this.state.addModalFlg} 
            ModalCancel={this.addModalCancel.bind(this)} 
            callback={this.selectList.bind(this,this.state.addModalType==1?1:this.currentNumber)}
            selectTypeList={this.state.selectTypeList}
            secondTypeList={this.state.secondTypeList}
            content={this.state.modalList.respData ? this.state.modalList.respData : {}}
          /> : ""
        }
        
        {/* 信息展示弹窗 */}
        <Modal
          width={"80%"}
          visible={this.state.contentModal}
          title="报告详情"
          onCancel={this.contentModalCancel.bind(this)}
          footer={this.state.buttongroup}
        >
          <ul className="joinBlackListModal">
            <li>
              <span className="title">发布人:</span><span className="content"><span style={{marginRight:'10px'}}>{modalList.publisherName}</span>{modalList.positionName}</span>
            </li>
            <li>
              <span className="title">发布时间:</span><span className="content">{modalList.createTime}</span>
            </li>
            <li>
              <span className="title">报告类别:</span><span className="content">{modalList.typeName}</span>
            </li>
            <li>
              <span className="title">报告标题:</span><span className="content">{modalList.title}</span>
            </li>
            <li>
              <span className="title">报告内容:</span><span className="content" dangerouslySetInnerHTML={{__html: modalList.detail}}></span>
            </li>
            <li>
              <span className="title">累计评论:</span><span className="content">{modalList.commentTotal}</span>
            </li>
            <li>
              <span className="title">累计被赞:</span><span className="content">{modalList.fabulousTotal}</span>
            </li>
            <li>
              <span className="title">累计阅读:</span><span className="content">{modalList.readTotal}</span>
            </li>
            {
              modalList.dataStatus == 4 ?
              <li>
                <span className="title">拒绝原因:</span><span className="content">{modalList.auditRefuseReason}</span>
              </li>
              :''
            }
          </ul>
        </Modal>
        <Modal
          title="拒绝原因"
          visible={this.state.refuseflag}
          onOk={this.handleOk.bind(this)}
          onCancel={this.handleCancel.bind(this)}
        >
          <Select style={{ width: "100%" }} value={this.state.refuseReason} onChange={this.handleChange.bind(this)}>
            {
              this.state.shsblist.map((item,i)=> {
                return(
                  <Select.Option value={item.code} key={i}>{item.value}</Select.Option>
                )
              })
            }
          </Select>
        </Modal>
      </div>
    )
  }
}
